<template>
	<uni-drawer :visible="isShow" mode="right" @close="closeDrawer">
		<view class="list">
			<!-- 城市 -->
			<view class="list-cell">
				<view class="list-cell-left">请选择城市</view>
				<view class="list-cell-right">
					<picker :range="cityList" :value="cityIndex" @change="chooseCity">
						<view>{{cityList[cityIndex]}}</view>
					</picker>
				</view>
			</view>
			<!-- 来源 -->
			<view class="list-cell">
				<view class="list-cell-left">请选择来源</view>
				<view class="list-cell-right" @click="showSourceDrawer">
					{{source_text}}
				</view>
			</view>
			<!-- 时间 -->
			<view class="list-cell">
				<view class="list-cell-left">请选择时间</view>
				<view class="list-cell-right">
					<picker mode="date" :start="startDate" :end="endDate" @change="">
						<view>{{date}}</view>
					</picker>
				</view>
			</view>
			<!-- 按钮 -->
			<view class="list-btn">
				<button class="confirm-btn" size="mini" type="default">搜索</button>
				<button size="mini" type="default">重置</button>
			</view>
		</view>

		<uni-drawer :visible="showSource" mode="right" @close="closeSourceDrawer">
			<view class="list">
				<view class="list-cell" v-for="(item,index) in sourceList" :key="index">
					<view class="list-cell-text" @click="chooseSource(item)">{{item.title}}</view>
				</view>
			</view>
		</uni-drawer>

	</uni-drawer>
</template>

<script>
	export default {
		data() {
			const currentDate = this.getDate({
				format: true
			})

			return {
				isShow: false,

				// 选择城市
				cityIndex: 0,
				cityList: ['中国', '美国', '巴西', '日本'],

				// 来源
				source_text: '请选择来源',
				showSource: false,
				sourceList: [{
						id: 1,
						title: '红丝云'
					},
					{
						id: 2,
						title: '抖音'
					}
				],

				date: currentDate,
			}
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			// 显示抽屉
			showDrawer() {
				this.isShow = true
			},
			// 关闭抽屉
			closeDrawer() {
				this.isShow = false
			},

			// 初始化日期
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 5;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			// 选择城市
			chooseCity(e) {
				this.cityIndex = e.target.value
			},

			// 显示选择来源
			showSourceDrawer() {
				this.showSource = true
			},
			
			// 选择来源
			chooseSource(e){
				this.source_text = e.title
				this.closeSourceDrawer()
			},

			// 关闭来源
			closeSourceDrawer() {
				this.showSource = false
			},

		}
	}
</script>

<style lang="less">
	.list {

		.list-cell {
			padding: 20upx 32upx;
			display: flex;
			font-size: 28upx;
			border-bottom: 1px solid #ebedf0;

			.list-cell-left {
				width: 6rem;
			}

			.list-cell-right {
				flex: 1;
				text-align: end;
			}

		}

		.list-btn {
			display: flex;
			padding: 40upx 32upx;

			.confirm-btn {
				color: #fff;
				background-color: #409EFF;
			}

		}

	}
</style>
